<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>免费BMI指数计算器</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <main>
        <form action="">
            <table id="table1">
                <caption><h1>免费计算你的身体质量指数(BMI)</h1></caption>
                <tr>
                    <td id="result" colspan="3">你的BMI值：<span id="BMI-value">22.1</span>，身体状态：<span id="status">正常</span></td>
                </tr>
                <tr>
                    <td>度量单位：</td>
                    <td>
                        <input type="radio" name="unit" id="gz" checked><label for="gz">公制</label>
                        <input type="radio" name="unit" id="yz"><label for="yz">英制</label>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>我的身高：</td>
                    <td>
                        <input type="text" id="height-data">
                    </td>
                    <td>单位：厘米&nbsp;cm</td>
                </tr>
                <tr>
                    <td>我的体重：</td>
                    <td>
                        <input type="text" id="weight-data">
                    </td>
                    <td>单位：千克&nbsp;kg</td>
                </tr>
                <tr>
                    <td>BMI&nbsp;标准：</td>
                    <td>
                        <select name="" id="">
                            <option value="">国际标准</option>
                            <!--selected="selected"，默认被选中-->
                            <option value="" selected="selected">中国标准</option>
                            <option value="">日本标准</option>
                            <option value="">新加坡标准</option>
                        </select>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="checkbox" id="save-record" checked><label for="save-record">自动保存&nbsp;BMI&nbsp;历史记录</label>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input id="calcBtn" type="button" value="计算 BMI">
                    </td>
                    <td></td>
                </tr>
            </table>
        </form>

        <section>
            <table id="table2">
                <caption>
                    <h4>BMI 中国标准</h4>
                </caption>
                <tr>
                    <td>分类</td>
                    <td>BMI范围</td>
                </tr>
                <tr>
                    <td>偏瘦</td>
                    <td>&lt;= 18.4</td>
                </tr>
                <tr>
                    <td>正常</td>
                    <td>18.5 ~ 23.9</td>
                </tr>
                <tr>
                    <td>过重</td>
                    <td>24.0 ~ 27.9</td>
                </tr>
                <tr>
                    <td>肥胖</td>
                    <td>&gt;= 28.0</td>
                </tr>
            </table>
        </section>
    </main>
    <script src="js/calc.js"></script>
</body>
</html>